Skip to content

feat: redesign ChannelHeader#2970

Merged
MartinCupela merged 21 commits intomasterfrom
feat/channel-header-figma
Feb 26, 2026
Merged

feat: redesign ChannelHeader#2970
MartinCupela merged 21 commits intomasterfrom
feat/channel-header-figma

Conversation

@MartinCupela
Copy link
Contributor

🎯 Goal

Closes REACT-721: Add new ChannelHeader

BREAKING CHANGE: remove support for "live" label
BREAKING CHANGE: remove support for displaying channel.data.subtitle under the title
BREAKING CHANGE: replace str-chat__channel-header-end with str-chat__channel-header__data

🛠 Implementation details

The sidebar toggle button on the left has as a click handle openMobileNav. I always disliked very very much this limiting approach of thinking that the only purpose of this button is toggle some mobile nav - too specific. However, in this PR I focus only on the redesign. I am already putting together a view controller API proposal that would be provided through ChatView components and consumed also in ChannelHeader. It would be customizable, what this button actually does.

🎨 UI Changes

image

MartinCupela and others added 21 commits February 20, 2026 10:38
Co-authored-by: Cursor <cursoragent@cursor.com>
… layout updates

- Add ChannelHeader styling folder (SCSS) per dev-patterns
- Reorder layout: icon | text block | avatar (right)
- Add sidebarCollapsed prop with IconLayoutAlignLeft when collapsed
- Add IconLayoutAlignLeft to Icons
- Add aria/Expand sidebar translations to all locales

Co-authored-by: Cursor <cursoragent@cursor.com>
- Render FloatingDateSeparator
- Add NewMessageNotification as standalone component at bottom of message list
- Style NewMessageNotification per Figma (pill, design tokens)
- Remove MessageNotification from MessageListNotifications; simplify props to { notifications }
- Move isNotAtLatestMessageSet visibility logic into ScrollToLatestMessageButton
- Rename ScrollToBottomButton to ScrollToLatestMessageButton
- Replace ComponentContext.MessageNotification with NewMessageNotification
- Remove "Latest Messages" string and related i18n entries
# Conflicts:
#	src/components/MessageList/styling/MessageList.scss
Co-authored-by: Cursor <cursoragent@cursor.com>
…nsumers

Co-authored-by: Cursor <cursoragent@cursor.com>
# Conflicts:
#	src/components/Badge/Badge.tsx
#	src/components/MessageList/ScrollToLatestMessageButton.tsx
#	src/components/MessageList/UnreadMessagesNotification.tsx
#	src/components/MessageList/UnreadMessagesSeparator.tsx
#	src/components/MessageList/VirtualizedMessageList.tsx
#	src/components/MessageList/styling/ScrollToLatestMessageButton.scss
@github-actions
Copy link

Size Change: +874 B (+0.21%)

Total Size: 408 kB

Filename Size Change
./dist/Channel-BzGCkDwP.js 20.9 kB +20.9 kB (new file) 🆕
./dist/Channel-CwMF3RD_.js 0 B -20.7 kB (removed) 🏆
./dist/cjs/index.js 208 kB +401 B (+0.19%)
./dist/css/index.css 35.5 kB +273 B (+0.77%)
ℹ️ View Unchanged
Filename Size
./dist/audioProcessing-BbOs2wMd.js 1.32 kB
./dist/ChannelPreview-BwtNdnX8.js 7.15 kB
./dist/cjs/emojis.js 2.97 kB
./dist/cjs/experimental.js 3.62 kB
./dist/cjs/mp3-encoder.js 1.27 kB
./dist/css/v2/emoji-mart.css 1.84 kB
./dist/css/v2/emoji-replacement.css 300 B
./dist/css/v2/index.css 39.4 kB
./dist/css/v2/index.layout.css 22.8 kB
./dist/limits-CJu8Wl1A.js 62.6 kB

compressed-size-action

@MartinCupela MartinCupela merged commit 57f8a91 into master Feb 26, 2026
4 of 5 checks passed
@MartinCupela MartinCupela deleted the feat/channel-header-figma branch February 26, 2026 11:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant